<template>
  <div class="user">
    <h1>用户流量排名TOP8</h1>
    <div
      style="height: 230px;"
      :id="echarts"
      class="echarts"
      ref="echarts"
    ></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "User",
  // props: ["UserData"],
  props: {
    UserData: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    drawCharts() {
      // var yData = [
      //   "168.159.258.687",
      //   "168.159.258.687",
      //   "168.159.258.687",
      //   "168.159.258.687",
      //   "168.159.258.687",
      //   "168.159.258.687",
      //   "168.159.258.687",
      //   "168.159.258.687",
      // ];
      const data = [];
      this.UserData.forEach((item) => {
        data.push(item.name);
      });
      const dataone = [];
      this.UserData.forEach((item) => {
        dataone.push(item.value);
      });
      // //百分比数据
      // var ratio = [100, 85, 75, 65, 55, 45, 35, 25];
      //100%-ratio
      var surplus = [100, 100, 100, 100, 100, 100, 100, 100];
      //drawPercentage("regionDetail", yData, ratio, surplus);
      let myChart = echarts.init(this.$refs.echarts);
      myChart.setOption({
        grid: {
          left: "8%",
          right: "35%",
          bottom: "-10%",
          top: 10,
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          inverse: true,
          data: data,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#a4d6ff",
            fontSize: 14,
            //fontWeight: "bold",
          },
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              barBorderRadius: [10, 10, 10, 10],
              normal: {
                color: "#19427B",
                barBorderRadius: [10, 10, 10, 10],
              },
            },
            silent: true,
            barWidth: 10,
            barGap: "-100%",
            data: surplus,
            label: {
              normal: {
                //position: [310, 2],
                position: "right",
                show: true,
                color: "#a4d6ff",
                // formatter: "上行:2.97(MB/S) 下行:2.97(MB/S)"
                formatter: (params) => {
                  // console.log(params.index);
                  const i = params.dataIndex;
                  //return `上行:${params.value}(MB/S) 下行:${params.value}(MB/S)`
                  //return `上行:${this.UserData[i].value}(MB/S)`;
                  const item = this.UserData[i] || {};
                  return `上行:${item.value}(MB/S)`;
                },
              },
            },
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#2A6BCD",
                  },
                  {
                    offset: 1,
                    color: "#34F6F8",
                  },
                ]),
                barBorderRadius: [10, 10, 10, 10],
              },
              barBorderRadius: [10, 10, 10, 10],
            },
            barWidth: 10,
            z: 10,
            data: dataone,
            label: {
              normal: {
                //position: [310, 2],
                position: "right",
                //show: true,
                color: "white",
                //formatter: "{c}%",
              },
            },
          },
        ],
      });
    },
  },
  computed: {
    echarts() {
      return "echarts" + Math.random() * 100000;
    },
  },
  mounted() {
    this.drawCharts();
  },
  watch: {
    UserData() {
      this.drawCharts();
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 2px;
  color: #a4d6ff;
  text-align: center;
}
</style>
